<template>
  <div class="body">
    <am-locker :is-show.sync="lockerVisible" id="doc-oc-demo1">
      <div class="canvas-bg">
        <div class="">
          <div class="Sidesliplist">
            <div class="businesscard">
              <img id="pic" :src="userPhoto">
              <span id="pleaselogin"></span>
              <div>
                No.{{userNumber}}
                <span class="vip">唯優VIP卡</span>
              </div>
            </div>
            <div class="left_list" @click="toSearch">
              <div class="icon"></div>
              <div class="listbox">搜索</div>
            </div>
            <div class="left_list" @click="toUserBook">
              <div class="Manual"></div>
              <div class="listbox">用戶手冊</div>
            </div>
            <div class="left_list">
              <div class="policy"></div>
              <div class="listbox">隱私策略</div>
            </div>
            <div class="left_list">
              <div class="contactus"></div>
              <div class="listbox">聯系入駐</div>
            </div>
            <div class="left_list" @click="toAboutUs">
              <div class="about"></div>
              <div class="listbox">關於我們</div>
            </div>
            <div class="left_list"  @click="toExit">
              <div class="exit"></div>
              <div class="listbox">退出登錄</div>
            </div>
          </div>
        </div>
      </div>
    </am-locker>
    <div class="menu" @click="lockerHandle">
    </div>
    <div class="bcGround" @click="offCanvas">
      <div class="memberPng"  @click="toMenberCenter"></div>
      <div class="person" @click="toMenberCenter">會員中心</div>
      <div class="weYouth"></div>
      <div class="topbar">
        這裏有
        <span class="color">{{society}}</span>個社團
      </div>
      <div class="note">
        <span>{{user}}</span>個成員，與您一起探索
        <span>{{activity}}</span>個活動
      </div>
      <div class="discovery">
        <div class="transparent"></div>
        <div class="transparent2"></div>
      </div>
      <div class="discovery_font">
        發現活動
        <br>
        <span class="fontSize">DISCOVERY</span>
      </div>
      <div class="more" @click="toActivityList">
        探索更多
        <span class="morelogo"></span>
      </div>
      <div class="news boxShadow">
        <div class="todeList" v-for="(li,index) in activityList" :key="index" @click="details(li.aid)">
          <div class="img-content">
            <div class="leftPic" :style="{background: 'url(https://weyouth.vip'+ li.photo + ')'}"></div>
            <div class="small"></div>
          </div>
          <div class="rightFont">
            <div class="title fontWeight">{{li.title}}</div>
            <div class="title lineHeight colorGrey">
              <span>{{li.society}}</span>
              <a class="last colorGrey">剩余席位{{li.limit}}</a>
            </div>
            <div class="title colorGrey">
              <span class="backGrey">{{li.start_time|formatDate}}</span>
              <span class="backGrey">{{li.type}}</span>
              <span class="backGrey">{{li.cost}}</span>
            </div>
            <div class="title position">
              <span class="maplog"></span>
              <span class="address">
              {{li.address}}
              </span>
              <span class="details" @click="details(li.aid)">詳情</span>
            </div>
          </div>
        </div>
      </div>
      <div class="member">
        <font>發現社團</font>
        <font class="rightMore" @click="toMore">
          探索更多
          <span class="morepic"></span>
        </font>
      </div>

      <div class="colllege boxShadow">
        <div class="list" v-for="(society,index) in societyList" :key="index" @click="jump(society.sid)">
          <div
            class="leftIcon"
            :style="{background: 'url(https://weyouth.vip'+ society.photo + ')'}"
          ></div>
          <div class="purple">{{society.name}}</div>
          <div class="onePurple">
            {{society.count}}位成员
            <span class="mopic"></span>
          </div>
        </div>
      </div>
      <div class="contact"></div>
    </div>
  </div>
</template>

<script>
import { getInfo, getOpenToken, getWxInfo, wxLogin, isBind, logout } from '@/api/login'
import { getSociety } from '@/api/society'
export default {
  name: 'MainPage',
  data () {
    return {
      lockerVisible: false,
      society: '',
      activity: '',
      user: '',
      activityList: '',
      societyList: '',
      userName: null,
      userPhoto: null,
      userNumber: null
    }
  },
  filters: {
    formatDate: function (value) {
      return value.slice(5, 10).replace('-', '月') + '日'
    }
  },
  created () {
    if (this.$route.query.code) {
      this.getOpenId()
    } else {
      this.left_bar()
      this.loadList()
    }
  },
  beforeRouteLeave (to, from, next) {
    var ele = document.querySelectorAll('.am-offcanvas')
    ele.forEach(item => {
      item.style.position = 'relative'
    })
    next()
  },
  methods: {
    offCanvas () {
      console.log(this.lockerVisible)
      if (this.lockerVisible === true) {
        this.lockerVisible = false
      }
    },
    toDetails (li) {
      this.$router.push('/')
    },
    toMore () {
      this.$router.push('/assn_list#more')
    },
    toActivityList () {
      this.$router.push('/activity_list')
    },
    toSearch () {
      this.$router.push('/search')
      this.lockerVisible = false
    },
    toMenberCenter () {
      this.$router.push('/member_center')
    },
    toUserBook () {
      this.lockerVisible = false
      this.$router.push('/user_book')
    },
    toAboutUs () {
      this.lockerVisible = false
      this.$router.push('/about_us')
    },
    toExit () {
      this.lockerVisible = false
      logout().then(res => {
        location.reload()
      })
    },
    lockerHandle () {
      this.lockerVisible = true
    },
    left_bar () {
      getInfo().then(res => {
        this.userName = res.data.name
        this.userPhoto = res.data.photo
        this.userNumber = res.data.number
      }).catch(err => {
        console.log(err)
      })
    },
    loadList () {
      getSociety().then(res => {
        const reqDate = res.data
        this.society = reqDate.society
        this.activity = reqDate.activity // 活动总数
        this.user = reqDate.user // 用户总数
        this.activityList = reqDate.activityList // 活动列表
        this.societyList = reqDate.societyList // 社团列表
        var img = this.userPhoto
        // var userName = this.userName
        if (!img) {
          document.getElementById('pic').src = '../style/img/1.png'
        }
      }).catch(err => {
        console.log(err)
      })
    },
    jump (sid) {
      this.lockerVisible = false
      this.$router.push({
        path: '/assn_details',
        query: {
          sid: sid
        }
      })
    },
    details (aid) {
      this.$router.push({
        path: '/activity_details',
        query: {
          aid: aid
        }
      })
    },
    getOpenId () {
      getOpenToken({
        code: this.GetQueryString('code')
      }).then(res => {
        this.getUserInfo(res.data.access_token, res.data.openid)
      }).catch(err => {
        console.log(err)
      })
    },
    getUserInfo (accessToken, openid) {
      getWxInfo({
        access_token: accessToken,
        openid: openid
      }).then(res => {
        this.uploadUserInfo(res.data.data)
      })
    },
    uploadUserInfo (userInfo) {
      wxLogin({
        city: userInfo.city,
        country: userInfo.country,
        headimgurl: userInfo.headimgurl,
        language: userInfo.language,
        openid: userInfo.openid,
        privilege: userInfo.privilege,
        province: userInfo.province,
        sex: userInfo.sex,
        unionid: userInfo.unionid
      }).then(res => {
        if (res.code === 1) {
          this.checkIsBind()
        }
      }).catch(err => {
        console.log(err)
      })
    },
    checkIsBind () {
      isBind().then(res => {
        if (res.code === 0) {
          this.$router.push('/wx_bind')
        }
        if (res.code === 1) {
          localStorage.setItem('isLogin', 'isLogin')
          this.$router.push('/')
        }
      })
    }
  }
}
</script>

<style scoped>
@import '../style/css/mui.min';
/* @import 'amaze-vue/dist/amaze-vue.css'; */
* {
  margin: 0;
  padding: 0;
}
.address {
  display: inline-block;
  width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* [v-cloak] {
  display: none;
} */

.am-offcanvas-bar {
  background-image: linear-gradient(180deg, #FEB692 27%, #EA5455 100%);
  width: 300px;
  opacity: .95;
}
.am-offcanvas-bar:after {
  background: linear-gradient(180deg, #FEB692 27%, #EA5455 100%);
}
.bcGround {
  height: 530px;
  width: 100%;
  background-image: url(../style/img/back.png);
  background-size: 100% 100%;
}

.topbar {
  color: white;
  font-size: 40px;
  text-align: center;
  padding-top: 120px;
}

.note {
  color: white;
  font-size: 18px;
  text-align: center;
  line-height: 40px;
}

.note span {
  color: yellow;
  min-width: 19px;
  display: inline-block;
  text-align: center;
}

.transparent {
  width: 95%;
  height: 3%;
  margin-left: 2.5%;
  margin-top: -4px;
  float: left;
  border-radius: 5px 5px 0 0;
  background: rgba(255, 255, 255, 0.2);
}

.transparent2 {
  width: 90%;
  height: 6%;
  margin-left: 5%;
  margin-top: -8px;
  float: left;
  border-radius: 5px 5px 0 0;
  background: rgba(255, 255, 255, 0.2);
}

.discovery {
  width: 94%;
  height: 100px;
  margin-left: 3%;
  margin-top: 50px;
  border-radius: 10px 10px 0 0;
  background: url(../style/img/11.png) no-repeat;
  background-size: cover;
}

.todeList {
  height: 160px;
  border-bottom: solid 1px #eceef0;
  background: white;
}

.leftPic {
  width: 96px;
  height: 96px;
  float: left;
  border-radius: 6px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  position: relative;
  z-index: 999;
  /* bottom: 60px; */
  /* margin-left: -16%; */
}
.img-content {
  margin: 4% 5% 0 -4%;
  float: left;
  text-align: center;
  /* background: rgba(240, 128, 128, 0.6); */
}
.small {
  /* display: inline; */
  /* width: 25%; */
  /* height: 70%; */
  width: 75px;
  height: 100px;
  position: relative;
  left: 12px;
  border-radius: 5px;
  background: rgba(240, 128, 128, 0.6);
}
.rightFont {
  width: 60%;
  height: 80%;
  margin-top: 5%;
  margin-left: 4%;
  float: left;
}

.title {
  width: 100%;
  min-height: 23%;
  font-size: 13px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media screen and (max-width: 375px) {
  .details {
    position: relative;
    left: 2%;
    bottom: 5px;
    color: rgba(1, 1, 1, 0.55);
    line-height: 20px;
    font-size: 15px;
  }
}
@media screen and (min-width: 376px) {
  .details {
    position: relative;
    left: 2.5rem;
    bottom: 5px;
    color: rgba(1, 1, 1, 0.55);
    line-height: 20px;
    font-size: 15px;
  }
}
.am-offcanvas-bar:after {
  background: rgba(255,255,255,0%);
}
.discovery_font {
  padding-top: 30px;
  padding-left: 30px;
  font-size: 23px;
  color: white;
  height: 40px;
  width: 40%;
  position: absolute;
  top: 256px;
  left: 10px;
}

.menu {
  height: 32px;
  width: 32px;
  float: left;
  margin: 16px 0 0 16px;
  background: url(../style/img/Menu.png);
  background-size: contain;
}

.person {
  height: 20px;
  width: 70px;
  float: right;
  color: white;
  margin: 22px 0 0 0;
}

img {
  height: 20px;
  width: 20px;
  float: right;
  margin: 22px 22px 0 0;
}

.weYouth {
  background-image: url(../style/img/99.png);
  background-size: 100% 100%;
  margin: 66px 0px 0 -15px;
  float: left;
  height: 32px;
  width: 132px;
}

.more {
  position: absolute;
  top: 230px;
  right: 20px;
  margin: 69px 0px 0 0px;
  height: 30px;
  width: 100px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  color: white;
  text-align: center;
  line-height: 30px;
  font-size: 16px;
}

.morelogo {
  float: right;
  background-size: 100% 100%;
  width: 12px;
  height: 12px;
  background-image: url(../style/img/morelogo.png);
  margin: 8px 10px 0px -10px;
}

.member {
  width: 93%;
  margin: auto;
  margin-left: 3.5%;
  margin-top: 30px;
  font-size: 17px;
  color: grey;
  margin-bottom: 20px;
}

.list {
  margin: auto;
  border-bottom: solid 1px #eceef0;
  height: 84px;
  background: white;
  line-height: 65px;
}

.leftIcon {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  margin: 20px 0 0 15px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  float: left;
  background-position: center !important;
}

.purple {
  font-size: 19px;
  float: left;
  line-height: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
  padding-left: 10px;
}

.onePurple {
  line-height: 84px;
  float: right;
  font-size: 14px;
  color: grey;
}

.color {
  color: yellow;
  min-width: 26px;
  display: inline-block;
  text-align: center;
}

.memberPng {
  background: url(../style/img/member.png);
  height: 15px;
  width: 15px;
  float: right;
  background-size: cover;
  margin-top: 25px;
  margin-right: 15px;
}

.fontSize {
  font-size: 17px;
}

.fontWeight {
  font-size: 18px;
}

.lineHeight {
  line-height: 30px;
}

.last {
  float: right;
  margin-right: 10px;
}

.colorGrey {
  color: grey;
}

.rightMore {
  float: right;
  font-size: 15px;
  color: rgb(204, 204, 204);
}

.backIcon {
  background: url(../style/img/4.png) no-repeat;
  background-size: contain;
}

.boxShadow {
  margin: auto;
  width: 91.7%;
  box-shadow: 0 0 20px #ccc;
}

.colllege {
  background: #fff;
  padding: 15px;
  border-radius: 5px;
  border: solid 3px white;
  min-height: 84px;
}

.news {
  margin: auto;
  width: 94%;
  padding-left:20px;
  padding-right: 20px;
  background: #fff;
  border-radius: 0 0 10px 10px;
  border: solid 4px white;
}

.position {
  color: rgb(204, 204, 204);
}

.maplog {
  float: left;
  height: 10px;
  margin: 3px 3px 0 3px;
  width: 8px;
  background-image: url(../style/img/maplog.png);
  background-size: 100% 100%;
}

.backGrey {
  padding: 2px;
  border-radius: 3px;
  background: rgb(250, 249, 247);
}

.morepic {
  margin: 3px 5px 0 3px;
  float: right;
  background-image: url(../style/img/sign.png);
  background-size: 100% 100%;
  width: 5px;
  height: 10px;
}

.mopic {
  margin: 37px 17px 0 7px;
  float: right;
  background-image: url(../style/img/sign.png);
  background-size: 100% 100%;
  width: 5px;
  height: 10px;
}

.contact {
  width: 100%;
  height: 144px;
  background: url(../style/img/copyright.png) no-repeat;
  margin-top: 32px;
  background-size: 100% 100%;
}

.lineHeight span {
  display: inline-block !important;
  width: 100px !important;
  height: 30px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu a {
  float: left;
  width: 33px;
  height: 35px;
}

.businesscard {
  background-image: url(../style/img/15.png) !important;
  height: 170px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-top: 10px;
}

.businesscard img {
  width: 46px;
  height: 46px;
  border: solid 1px none;
  border-radius: 46px;
  margin-top: 10px;
  margin-left: 15px;
  float: left;
}

.businesscard div {
  color: slategray;
  width: 100%;
  margin-top: 63px;
  margin-left: 12px;
  float: left;
}

.icon {
  width: 30px;
  background-image: url(../style/img/search.png);
  background-size: 100% 100%;
  float: left;
  height: 30px;
}

.Manual {
  width: 30px;
  background-image: url(../style/img/search.png);
  background-size: 100% 100%;
  float: left;
  height: 30px;
}

.policy {
  width: 28px;
  background-image: url(../style/img/policy.png);
  background-size: 100% 100%;
  float: left;
  height: 30px;
}

.Manual {
  width: 28px;
  background-image: url(../style/img/Manual.png);
  background-size: 100% 100%;
  float: left;
  height: 30px;
}

.contactus {
  width: 24px;
  background-image: url(../style/img/contactus.png);
  background-size: 100% 100%;
  float: left;
  height: 30px;
}

.about {
  width: 24px;
  background-image: url(../style/img/about.png);
  background-size: 100% 100%;
  height: 30px;
  display: inline-block;
  float: left;
  margin-top: 7px;
}
.exit {
  width: 24px;
  background-image: url(../style/img/exit.png);
  background-size: 100% 100%;
  height: 30px;
  display: inline-block;
  float: left;
  margin-top: 7px;
}

.listbox {
  color: white;
  float: left;
  margin-top: 10px;
  margin-left: 20px;
}

.Whiteline {
  float: left;
  margin: 10px auto auto 16%;
  height: 1px;
  width: 80%;
  background: rgb(255, 255, 255);
}

.left_list {
  width: 100%;
  height: 44px;
  border-bottom: solid 1px white;
  margin-top: 20px;
}

.vip {
  float: right;
  color: #ea5455;
  margin-right: 24px;
}
</style>
<style>
  .am-offcanvas,.am-active {
  /* display: none; */
  position: relative !important;
}
</style>
